<template>
    <rx-dialog  @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <div class="tab-center">
                    <div class="tab-list" :class="[selectedKey==item.key?'tab-list-hover':'']" @click="selectedChange(item)" v-for="item in controlList">
                        <i v-if="selectedKey==item.key" class="iconfont icondui tab-icon"></i>
                        <img :src="item.value">
                        <span class="tab-list-name">{{item.name}}</span>
                    </div>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxLayout,RxDialog,Util,RxUseIcon} from "@lowcode/jpaas-common-lib";
export default {
    name: "TabContainerOpen",
    components: {
        RxLayout,
        RxDialog,
        RxUseIcon
    },
    props:["layerid","lydata","controlList","destroy"],
    data(){
        return{
            selectedKey:'',//选中的key
        }
    },
    created(){

    },
    methods:{
        selectedChange(item){
            this.selectedKey = item.key
        },
        handleSubmit(){
            Util.closeWindow(this,'ok',this.selectedKey);
        },
        cancel(){
            Util.closeWindow(this,'cancel');
        }

    }
}
</script>

<style scoped>
.tab-center{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.tab-list{
    width: 136px;
    height: 136px;
    opacity: 1;
    display: flex;
    border-radius: 4px;
    border: 1px solid rgba(224, 224, 224, 1);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    position: relative;
}
.tab-list:hover{
    border: 1px solid rgba(26, 94, 255, 1);
}
.tab-list-hover:before{
    content: "";
    border-top: 15px solid #2e86ff;
    border-right: 15px solid #2e86ff;
    border-left: 15px solid transparent;
    border-bottom: 15px solid transparent;
    top: 0px;
    right: 0px;
    position: absolute;
    z-index: 2;
}
.tab-list-name{
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
}
.tab-list-hover{
    border: 1px solid rgba(26, 94, 255, 1);
}
.tab-icon{
    top: -5px;
    right: 0px;
    position: absolute;
    z-index: 2;
    color: white;
}
</style>